<template>
  <div>
	  <div>
      <div style="margin:2% 0;display: inline-block;">
        <span>订单编号：</span>
        <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入订单编号" v-model="orderNum"></el-input>
        <span>订单状态:</span>
        <el-select v-model="status" placeholder="请选择订单状态" style="width:150px;"  @change="selectTrigger()">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <span>完成状态:</span>
        <el-select v-model="finishState" placeholder="请选择完成状态" style="width:150px;" @change="selectTrigger()">
          <el-option v-for="item in finishStateOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="tableData.content"
		row-key="id">
	    <el-table-column
	  	 prop="orderNum"
	  	 label="订单号"
	  	 width="80">
	     </el-table-column>
	    <el-table-column
	  	 prop="playerName"
	  	 label="陪玩昵称">
	     </el-table-column>
      <el-table-column prop="gameType" label="游戏类型">
        <template slot-scope="scope">
          <span>{{scope.row.gameType ? scope.row.gameType == 1? '王者': '吃鸡' : '未设置'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="商品个数"/>

      <el-table-column prop="price" label="单价">
        <template slot-scope="scope">
          <span>{{scope.row.price ? scope.row.price : '未设置'}}/每局</span>
        </template>
      </el-table-column>
      <el-table-column prop="couponMoney" label="优惠券金额"/>
      <el-table-column prop="payMoney" label="支付金额"/>
      <el-table-column prop="payNum" label="支付单号"/>
      <el-table-column prop="payWay" label="支付方式">
        <template slot-scope="scope">
          <span>{{scope.row.payWay | payWay}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="payTime"
        label="支付时间">
      </el-table-column>
      <el-table-column prop="descrition" label="订单备注"/>

      <el-table-column
        prop="conventionTime"
        label="约定时间">
      </el-table-column>

      <el-table-column prop="isRefund" label="是否可以退款">
        <template slot-scope="scope">
          <span>{{scope.row.isRefund ? scope.row.isRefund == 1? '自动取消': '手动取消' : ''}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="finishState" label="完成状态">
        <template slot-scope="scope">
          <span>{{scope.row.finishState | finishStateFormat}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="finishTime"
        label="完成时间">
      </el-table-column>

      <el-table-column
        prop="createAT"
        label="创建时间">
      </el-table-column>
      <el-table-column prop="status" label="订单状态" align="center" fixed="right">
        <template slot-scope="scope">
          <span>{{scope.row.status | statusFormat}}</span>
        </template>
      </el-table-column>
	    <el-table-column
	      label="操作"
        align="center"
        fixed="right">
	      <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="updates(scope.row)">详情
          </el-button>
	      </template>
	    </el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="tableData.totalElements">
	    </el-pagination>
	  </div>
  </div>
</template>

<script>
  const status = [ // 1待付款 2已付款 3已取消 4待退款 5已退款 6拒绝退款
    {
      label: '待付款',
      value: 1
    },
    {
      label: '已付款',
      value: 2
    },
    {
      label: '已取消',
      value: 3
    },
    {
      label: '待退款',
      value: 4
    },
    {
      label: '已退款',
      value: 5
    },
    {
      label: '拒绝退款',
      value: 6
    },
  ]
  const finishState = [ //1待完成 2进行中 3已完成 4已评价 5未接单 6订单取消
    {
      label: '待完成',
      value: 1
    },
    {
      label: '进行中',
      value: 2
    },
    {
      label: '已完成',
      value: 3
    },
    {
      label: '已评价',
      value: 4
    },
    {
      label: '未接单',
      value: 5
    },
    {
      label: '订单取消',
      value: 6
    }
  ]
	export default {
	    data() {
	      return {
				size:5,
				page:1,
        orderNum:null,
        status:null,
        finishState:null,
        statusOptions: status,
        finishStateOptions: finishState,
				tableDataLoading:false,
        tableData:{
          content: []
        },
			}
		},
    filters: {
      payWay(value){
        let list = [
          '微信','支付宝','钱包'
        ]
        if(!value) return ''
        return list[value*1-1]
      },
      statusFormat(value){
        if(!value) return ''
        return status[value*1-1].label
      },
      finishStateFormat(value){
        if(!value) return ''
        return finishState[value*1-1].label
      }
    },
		methods: {
      // select自动选择
      selectTrigger() {
        this.dataSelect()
      },
      // 查询
      select() {
        this.page = 1
        this.size = 5
        this.dataSelect()
      },
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
      // 详情跳转
      updates (row) {
        this.$router.push({path: '/playWithOrderDetail', query: {id: row.id}})
      },
      // 获取数据
      dataSelect () {
        let page = this.page - 1
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl2('/player/orderList'),
          method: 'get',
          params: this.$http.adornParams({
            'page':page,
            'size':this.size,
            'status':this.status,
            'finishState':this.finishState,
            'orderNum':this.orderNum,
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          // console.log(data)
          this.tableData = data.data || {content: []};
        })
      }
		},
    mounted() {
      this.dataSelect()
    }
	  };
</script>

<style>

</style>
